!function ($) {
    const reqHeader = $('.reqHeader');//引入header.html的div
    const reqFooter = $('.reqFooter')
    reqHeader.load('../html/header.html');
    reqFooter.load('../html/footer.html');

    const smlpic = $('.smlpic li img');
    const midpic = $('.midpic>img');
    const midpicBox = $('.midpic');
    const bigpic = $('.bigpic>img');
    const colors = $('.colors img');
    const colorsActive = $('.colors p span');
    const smlxl = $('.smlxl p');
    const smlxlspan = $('.smlxl p span');
    const zoom = $('.zoom');
    const bigpicBox = $('.bigpic');
    const numBtns = $('.num span');
    const numInput = $('.num input');
    const addBtn = $('.add p').eq(1);
    const price = $('.price>span');
    const title = $('h5');

    let apiUrl = 'http://10.31.162.37/underline/uniqloAPI/getDataById.php';
    let detailData = [];
    //获取sid
    let sid = location.search.substring(1).split('=')[1];
    $.ajax({
        url: apiUrl,
        data: { sid },
        dataType: 'json'
    }).done(data => {
        console.log(data);
        
        let goods = detailData = data[0];
        let smlData = goods.piclisturl.split(',')
        $.each(smlpic, function (index) {
            smlpic.eq(index).prop({ src: smlData[index] });
        });
        $.each(colors, function (index) {
            colors.eq(index).prop({ src: smlData[index] });
        })
        price.html(goods.price);
        title.html(goods.title);
        midpic.prop({ src: goods.url });
        bigpic.prop({ src: goods.url });
    })
    smlxl.on('click', function () {
        $('.sizeAll>p>span').html($(this).html());
        $(this).addClass('sizeActive').siblings().removeClass('sizeActive');
        smlxlspan.removeClass('activespan');
        smlxlspan.eq($(this).index()).addClass('activespan');

    })
    //放大镜 -----------start
    smlpic.hover(function () {
        midpic.prop({ src: $(this).prop('src') });
        bigpic.prop({ src: $(this).prop('src') });
    });
    colors.on('click', function () {
        midpic.prop({ src: $(this).prop('src') });
        bigpic.prop({ src: $(this).prop('src') });
        colorsActive.html($(this).prop('alt'));
        $(this).addClass('active').siblings('img').removeClass('active');
    });
    let bili = bigpicBox.width() * 2 / zoom.width();//比例

    midpicBox.hover(function () {
        // zoom.show();
        bigpicBox.show();
        $(this).on('mousemove', function (e) {
            let top = e.pageY - midpicBox.offset().top - 125;
            let left = e.pageX - midpicBox.offset().left - 125;
            let right = midpicBox.width() / 2 - left;
            let bottom = midpicBox.height() / 2 - top;
            bigpic.css({ left: -left * bili, top: -top * bili });
            //设置上边框
            if (top <= 0) {
                top = 0;
            } else if (top >= midpicBox.width() / 2) {
                top = midpicBox.width() / 2
            };
            //设置左边框      
            if (left <= 0) {
                left = 0;
            } else if (left >= midpicBox.width() / 2) {
                left = midpicBox.width() / 2
            };
            //设置右边框
            if (right <= 0) {
                right = 0;
            } else if (right >= midpicBox.width() / 2) {
                right = midpicBox.width() / 2
            };
            //设置下边框
            if (bottom <= 0) {
                bottom = 0;
            } else if (bottom >= midpicBox.width() / 2) {
                bottom = midpicBox.width() / 2
            };
            let border_widht = top + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px ';
            zoom.css({ borderWidth: border_widht });
            bigpic.css({ left: -left * bili, top: -top * bili });0
        })
    },
        function () {
            // zoom.hide();
            zoom.animate({ borderWidth: 0 })
            bigpicBox.hide();

        })
    //放大镜 -----------end0
    //购物车 -----------start
    let num = 1;
    numBtns.eq(0).on('click', function () {
        let i = +numInput.val();
        i--;
        if (i <= 1) {
            numInput.val(1);
        } else {
            numInput.val(i)
        }

    })
    numBtns.eq(1).on('click', function () {
        let i = +numInput.val();
        i++;
        numInput.val(i);
    });

    addList();
    function addList() {
        addBtn.on('click', function () {
            num = numInput.val();
            $.ajax({
                type: 'post',
                url: 'http://10.31.162.37/underline/uniqloAPI/addCartList.php',
                data: {
                    sid: detailData.sid,
                    url: detailData.url,
                    title: detailData.title,
                    price: detailData.price,
                    sid: detailData.sid,
                    buynum: num
                }
            }).done(data => {
                if (data == 1) {
                    $('#success').fadeIn().delay(800).fadeOut();
                }
            })
        })
    }

    //购物车 -----------end
}(jQuery)